<template>
	<view class="container">
		<!-- 顶部header部分 -->
		<view class="header-content">
			<img class='banner-img' :src="baseURL + '/static/center/new-center-banner.png'" alt="" />
			<view class="position-box">
				<view :style="{ height: height + 'px' }"> </view>
				<view class="top-content">
					<view class="left-box">
						<view class="we-avatar">
							<img :src="
				    avatarUrl
				      ? avatarUrl
				      : 'https://picx.zhimg.com/v2-8d117f237079440cc59baf9ca762d29f_r.jpg?source=1940ef5c'
				  " alt="" />
						</view>
						<view style="font-size: 32rpx; font-weight: 500">
							<view class="avatar-name" v-if="avatarUrl">{{ nickName }}</view>
							<div class="text-box" v-else>
								<div @click="wxInfoClick" style="
									  border: 1px solid #fff;
									  color: #fff;
									  padding: 10rpx 20rpx;
									  border-radius: 30rpx;
									">
									请完善信息
								</div>
							</div>
							<!-- <view class="center-vip">
								<img :src="baseURL+'/static/center/icon-vip.png'" alt="">
							</view> -->
						</view>
					</view>
					<view v-if="avatarUrl" class="right-box" @click="informationClick">
						<u-icon color="#fff" name="arrow-right" size="40rpx"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<view class="wdda-box">
			<view class="background-box">
				<view style="font-size: 32rpx; padding: 10px 20px;">我的档案</view>
				<view class="content-box">
					<!-- 	<view class="item-box" @click="archivalRecordClick">
						<view><img :src="baseURL + '/static/center/dajl-icon.png'" alt="" /></view>
						<view>档案记录</view>
					</view> -->

					<view class="item-box" @click="appointmentRecordClick">
						<view class="img-center"><img mode='widthFix'
								:src="baseURL + '/static/center/new-icon-yyda.png'" alt="" /></view>
						<view>预约记录</view>
					</view>
					<view class="item-box" @click="consumptionRecordClick">
						<view class="img-center"><img mode='widthFix'
								:src="baseURL + '/static/center/new-icon-xfjl.png'" alt="" /></view>
						<view>消费记录</view>
					</view>
					<view class="item-box" @click="healthRecordsMethod">
						<view class="img-center"><img mode='widthFix'
								:src="baseURL + '/static/center/new-icon-jkda.png'" alt="" /></view>
						<view>健康档案</view>
					</view>
					<view class="item-box" @click="CollectLink">
						<view class="img-center"><img mode='widthFix'
								:src="baseURL + '/static/center/new-icon-wdsc.png'" alt="" /></view>
						<view>我的收藏</view>
					</view>

				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="gjx-box">
				<view style=" font-size: 32rpx;	margin-bottom: 20px;">我的档案</view>
				<view style="display: flex;flex-wrap: wrap;">
					<!-- 	<view class="item-box" @click="informationRegistrationClick">
						<img mode='widthFix' :src="baseURL + '/static/center/xxdj-icon.png'" alt="" />
						<view>信息登记</view>
					</view> -->
					<view class="item-box" style="position: relative">
						<img mode='widthFix' :src="baseURL + '/static/center/new-icon-yqhy.png'" alt="" />
						<view>邀请好友</view>
						<button :hairline="false" :style="{
					  border: 'none',
					  padding: '0 !important',
					  width: '100%',
					  height: '100%',
					  opacity: '0',
					  position: 'absolute',
					}" open-type="share" text="邀请好友"></button>
					</view>
					<view class="item-box" @click="synchronizationClick">
						<img mode='widthFix' :src="baseURL + '/static/center/new-icon-sjtb.png'" alt="" />
						<view>数据同步</view>
					</view>
					<!-- 	<view class="item-box" @click="DotMethod" style="position: relative;">
						<view><img mode='widthFix' :src="baseURL + '/static/center/icon-xx.png'" alt="" /></view>
						<view>消息</view>
						<div class="message-badge">
							<u-badge numberType="overflow" type="error" max="99" :value="numberDot"></u-badge>
						</div>
					</view> -->
					<view class="item-box" @click="ProblemFeedbackClick">
						<img mode='widthFix' :src="baseURL + '/static/center/new-icon-wtfk.png'" alt="" />
						<view>问题反馈</view>
					</view>
					<view class="item-box" @click="hotPhoto">
						<img mode='widthFix' :src="baseURL + '/static/center/new-icon-rxdh.png'" alt="" />
						<view>热线电话</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 数据同步弹窗 -->
		<u-modal :show="show" title="数据同步" showCancelButton @confirm="confirmClick" @cancel="cancelClick">
			<div>
				<view style="font-size: 24rpx;color: orangered;text-align: center;margin-bottom: 20rpx;">
					用于同步老用户信息，输入老用户手机号进行数据合并</view>
				<view style="margin-bottom: 20rpx"><u--input placeholder="请输入手机号" v-model="model.phone"></u--input>
				</view>
				<u-input v-model="model.captcha" placeholder="请输入验证码">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="30" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</div>
		</u-modal>
	</view>
</template>
<script>
	import {
		sendSynchroSms,
		synchroData
	} from "@/api/axios/center.js";
	import {
		appMessageList
	} from '@/api/axios/Message.js'
	export default {
		props: {
			height: {
				type: Number,
				require: true,
			},
		},
		data() {
			return {
				avatarUrl: "",
				nickName: "",
				openId: "",
				baseURL: this.staticURL,
				show: false,
				tips: "",
				model: {
					phone: "",
					captcha: "",
				},
				captcha: "",
				numberDot: 0
			};
		},
		onReady() {
			this.avatarUrl = uni.getStorageSync("avatarUrl");
			this.nickName = uni.getStorageSync("nickName");
			this.openId = uni.getStorageSync("openId");
			this.model.openId = this.openId;
		},
		created() {
			let customerId = uni.getStorageSync('customerId')
			let openId = uni.getStorageSync('openId')
			appMessageList({
				params: {
					openId,
					customerId
				}
			}).then(res => {
				let numberDot = 0
				res.forEach(item => {
					numberDot += item.notViewedCount
				})
				console.log(numberDot);
				this.numberDot = numberDot
			})
		},

		methods: {
			// 健康档案
			healthRecordsMethod() {
				uni.navigateTo({
					url: "/pages-center/HealthRecords/index",
				});
				// this.showToastMethod();
			},
			// 消息
			DotMethod() {
				uni.navigateTo({
					url: "/pages/MessageList/index",
				});

			},
			// 消费记录
			consumptionRecordClick() {
				uni.navigateTo({
					url: "/pages-center/ConsumptionRecord/index",
				});
			},
			// 积分商城
			internetHospitalClick() {
				uni.navigateTo({
					url: "/pages-center/PointsMall/index",
				});
			},
			// 热线电话
			hotPhoto() {
				uni.makePhoneCall({
					phoneNumber: "400-888-0050",
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: "正在获取验证码",
					});
					sendSynchroSms({
						params: {
							phone: this.model.phone,
						},
					}).then((res) => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast("验证码已发送");
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					});
				} else {
					uni.$u.toast("倒计时结束后再发送");
				}
			},

			confirmClick() {
				let _this = this;
				synchroData(this.model).then((res) => {
					_this.show = false;
				});
			},
			cancelClick() {
				this.show = false;
			},
			synchronizationClick() {
				this.show = true;
			},
			archivalRecordClick() {
				uni.navigateTo({
					url: "/pages-center/ArchivalRecord/index",
				});
			},
			ProblemFeedbackClick() {
				uni.navigateTo({
					url: "/pages-center/ProblemFeedback/index",
				});
			},
			appointmentRecordClick() {
				uni.navigateTo({
					url: "/pages-center/AppointmentRecord/index",
				});
			},
			CollectLink() {
				uni.navigateTo({
					url: "/pages-center/Collect/index",
				});
			},
			wxInfoClick() {
				uni.redirectTo({
					url: "/pages-center/WXinfo/index",
				});
			},
			informationClick() {
				uni.navigateTo({
					url: "/pages-center/Information/index",
				});
			},
			orderClick() {
				uni.navigateTo({
					url: "/pages-shop/OrderInformation/index",
				});
			},
			informationRegistrationClick() {
				uni.navigateTo({
					url: "/pages-center/InformationRegistration/index",
				});
			},
			couponClick() {
				uni.navigateTo({
					url: "/pages-center/Coupon/index",
				});
			},
			PhysicianManagementClick() {
				uni.navigateTo({
					url: "/pages/PhysicianManagement/index",
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>